Update CTABanner and deprecate Bento by rezrah · Pull Request #1332 · primer/brand

rezrah · 2026-04-29T12:06:02Z

Summary

Towards https://github.com/github/brand-marketing-design/issues/2606

Updates CTABanner to further match Brand Refactor designs and extend feature set. Also deprecates Bento as it's a retired style that is being replaced by CTABanner and River in newer LP designs.

List of notable changes:

Adds a Logo slot
Fixes sizing of images in the balanced variant
Adds support for a Link
Adds duotone support to CTABanner headings
Adds relevant test coverage and stories
Adds deprecation notice to Bento
Replaced custom Bento in AI recipe with a CTABanner per the actual design
Switched Testimonial duotone to use correct tokens

What should reviewers focus on?

Are all proposed changes reasonable?
Does anything look visually off
Was anything implement counter to design intent

Steps to test:

Go to this story and scroll down to the CTABanner which appears under RIver. Notice it more closely matches the design.
Review CTABanner logos stories for correct implementation and positioning
Review Link implementation
Review duotone implementation
Report any issues in this issue as a comment

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

New logo support

### New duotone heading

New optional link

changeset-bot · 2026-04-29T12:06:08Z

🦋 Changeset detected

Latest commit: f9a5645

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-docs	Minor
@primer/brand-css	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-04-29T12:07:56Z

🔍 Design token changes found

View CSS variable changes

+ --brand-CTABanner-color-heading-emphasis: var(--base-color-scale-green-7);

+ --brand-CTABanner-color-logo-muted: var(--brand-color-text-muted);

+ --brand-CTABanner-color-logo-emphasis: var(--brand-color-text-default);

+ --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(37%) sepia(7%) saturate(778%) hue-rotate(171deg) brightness(96%) co

+ --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(450%) hue-rotate(172deg) brightness(100

+ --brand-CTABanner-color-heading-emphasis: var(--brand-color-text-emphasized);

+ --brand-CTABanner-color-logo-muted: var(--brand-color-text-muted);

+ --brand-CTABanner-color-logo-emphasis: var(--brand-color-text-default);

+ --brand-CTABanner-color-logo-filter-muted: brightness(0) saturate(100%) invert(61%) sepia(8%) saturate(430%) hue-rotate(171deg) brightness(94%) co

+ --brand-CTABanner-color-logo-filter-emphasis: brightness(0) saturate(100%) invert(91%) sepia(2%) saturate(2455%) hue-rotate(193deg) brightness(107

- --brand-Testimonial-quote-color-emphasis: #1a7f37;
+ --brand-Testimonial-quote-color-emphasis: var(--base-color-scale-green-7);

- --brand-Testimonial-quote-color-emphasis: #5fed83;
+ --brand-Testimonial-quote-color-emphasis: var(--brand-color-text-emphasized);

- --brand-Testimonial-quote-color-emphasis: #1a7f37;
+ --brand-Testimonial-quote-color-emphasis: var(--base-color-scale-green-7);

github-actions · 2026-04-29T12:09:56Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 0 improved, 2 decreased

Component/Hook	Statements	Functions	Branches	Change
`IDE`	~~91.6%~~ 91.2%	97.4%	~~83.4%~~ 82.8%	-0.7%
`CTABanner`	100.0%	100.0%	~~92.1%~~ 91.7%	-0.5%

Copilot

Pull request overview

Updates the CTABanner component to align with the Brand Refactor designs (new logo/link support, updated sizing/defaults, duotone heading emphasis) and begins deprecating Bento, including migrating a Flexsuite recipe from Bento to CTABanner.

Changes:

Extended CTABanner API with CTABanner.Logo and CTABanner.Link, plus improved heading/image defaults and updated styling.
Added/updated CTABanner unit + visual coverage, Storybook feature stories, and Next Docs usage docs.
Deprecated Bento (code + docs) and migrated the Flexsuite AI overview recipe + localized content keys accordingly.

Show a summary per file

File	Description
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx	Replaces in-recipe `Bento` usage with a `CTABanner` instance (logo/link/image).
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css	Removes Bento-specific styling now that the recipe uses `CTABanner`.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.module.css.d.ts	Removes deleted Bento-related class typings.
packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.content.ts	Splits the old Bento heading string into prefix/emphasis segments for the new heading markup.
packages/react/src/CTABanner/CTABanner.tsx	Adds `Logo` + `Link` subcomponents; adjusts heading sizing behavior and image prop typing.
packages/react/src/CTABanner/CTABanner.module.css	Updates layout/spacing, adds logo/link/duotone heading styles, and adjusts balanced image sizing.
packages/react/src/CTABanner/CTABanner.module.css.d.ts	Adds typings for new CSS module classnames.
packages/react/src/CTABanner/CTABanner.test.tsx	Adds unit coverage for logo/link rendering, ref/class forwarding, heading default sizing, and duotone markup.
packages/react/src/CTABanner/CTABanner.features.stories.tsx	Adds Storybook feature stories for logo/link/duotone heading variations.
packages/react/src/CTABanner/CTABanner.visual.spec.ts	Adds visual regression cases for the new feature stories.
packages/react/src/CTABanner/CTABanner.visual.spec.ts-snapshots/Visual-Comparison-CTABanner-CTABanner-With-Link-1-darwin.png	Updates/adds visual baseline for the new “With Link” case.
packages/react/src/Bento/Bento.tsx	Adds JSDoc deprecation notice directing consumers to `CTABanner` / `River`.
apps/next-docs/content/components/CTABanner/react.mdx	Documents logo/link/duotone usage and updates heading sizing notes.
apps/next-docs/content/components/Bento/index.mdx	Adds a deprecation warning note in the docs.
apps/storybook/static/locales/*/FlexSuiteOverview.json	Updates i18n keys for the new heading prefix/emphasis split.
packages/e2e/scripts/playwright/run-visual-tests	Fails fast locally if port 6006 is already in use (prevents confusing visual test runs).
packages/e2e/scripts/playwright/update-visual-snapshots	Same port 6006 preflight check for snapshot updates.
packages/design-tokens/src/tokens/functional/components/cta-banner/colors.js	Adds CTA banner logo color/filter tokens.
packages/design-tokens/src/tokens/functional/components/testimonial/colors.json	Aligns testimonial emphasis color to the shared emphasized text token.
.changeset/loud-banners-shine.md	Changeset describing new CTABanner capabilities and updated defaults.
package-lock.json	Updates workspace versions/lockfile to the new release version.

Copilot's findings

Files reviewed: 22/34 changed files
Comments generated: 1

github-actions · 2026-04-29T12:13:12Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

rezrah · 2026-04-29T12:33:24Z

FYI... this visual diff change to heading is intentional. The code is applying display as a test in the source code, which wasn't previously being forwarded. Now that's been fixed.

kellyquesnel

From a design POV, all viewports and color modes behave properly

danielguillan

👌

update CTABanner and deprecate Bento

0e8bf0d

Copilot AI review requested due to automatic review settings April 29, 2026 12:06

rezrah requested a review from a team as a code owner April 29, 2026 12:06

Copilot started reviewing on behalf of rezrah April 29, 2026 12:06 View session

rezrah temporarily deployed to github-pages April 29, 2026 12:09 — with GitHub Actions Inactive

Copilot AI reviewed Apr 29, 2026

View reviewed changes

Comment thread packages/react/src/recipes/Flexsuite/Overview/FlexSuiteAIOverview.tsx Outdated

update snapshots

80852ad

rezrah requested review from danielguillan and kellyquesnel April 29, 2026 12:23

rezrah temporarily deployed to github-pages April 29, 2026 12:26 — with GitHub Actions Inactive

rezrah commented Apr 29, 2026

View reviewed changes

fix color contrast

f9a5645

rezrah temporarily deployed to github-pages April 29, 2026 13:03 — with GitHub Actions Inactive

kellyquesnel reviewed Apr 29, 2026

View reviewed changes

danielguillan approved these changes Apr 30, 2026

View reviewed changes

rezrah merged commit c4f4634 into main Apr 30, 2026
14 checks passed

rezrah deleted the rezrah/bento-update branch April 30, 2026 18:49

primer Bot mentioned this pull request Apr 30, 2026

Release tracking #1335

Merged

github-actions Bot mentioned this pull request Jun 2, 2026

New release available "@primer/react-brand@0.68.0" primer/brand-releases#39

Closed

3 tasks

Navigation Menu

Uh oh!

Update CTABanner and deprecate Bento - #1332

Update CTABanner and deprecate Bento#1332
rezrah merged 3 commits into
mainfrom
rezrah/bento-update

rezrah commented Apr 29, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 29, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 29, 2026 •

edited

Loading

Uh oh!

rezrah Apr 29, 2026

Uh oh!

kellyquesnel left a comment

Uh oh!

danielguillan left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

rezrah commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Contributor checklist:

Reviewer checklist:

Screenshots:

New logo support

New optional link

Uh oh!

changeset-bot Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Design token changes found

Uh oh!

github-actions Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Copilot's findings

Uh oh!

Uh oh!

github-actions Bot commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

rezrah Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

kellyquesnel left a comment

Choose a reason for hiding this comment

Uh oh!

danielguillan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

rezrah commented Apr 29, 2026 •

edited

Loading

changeset-bot Bot commented Apr 29, 2026 •

edited

Loading

github-actions Bot commented Apr 29, 2026 •

edited

Loading

github-actions Bot commented Apr 29, 2026 •

edited

Loading

github-actions Bot commented Apr 29, 2026 •

edited

Loading